<template>
  <div class="result">
    <scroller v-show="dataList.length" lock-x scrollbar-y height="-60" use-pullup :pullup-config="pullupConfig2" ref="demo2" @on-pullup-loading="load2">
        <div class="result-item">
            <div class="result-list" @click="$router.push({ path: 'voteResult', query: { id: item.voteId }})" v-for="(item,index) in dataList" :key="index">
                <img :src="item.voteCoverUrl?item.voteCoverUrl:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2851070236,2216724533&fm=27&gp=0.jpg'" class="pic">
                <div class="list-info">
                    <div class="title">{{item.voteTitle}}</div>
                    <div class="text">{{item.voteIntroduction}}</div>
                    <div class="data box">
                        <div class="data-list box box-align-center">
                            <div class="icon"></div>{{item.obtained}}
                        </div>
                        <div class="data-list box box-align-center">
                            <div class="icon"></div>{{item.totalBrowsing}}
                        </div>
                    </div>
                    <div class="btn">查看结果</div>
                </div>
            </div>
        </div>
      <div v-if="noData" class="no-data">没有更多内容</div>
    </scroller>
    <div v-if="!dataList.length" class="no-wrap">
        <img src="../../images/noData.png" alt="">
        当前列表为空
    </div>
  </div>
</template>
<script>
import {Scroller } from 'vux'
let CONSTANT = require('../../../wechat/static/constant/constant.js'),
    common = require("../../../wechat/static/common/common.js");
  export default {
    data() {
      return {
        dataList:[],
        pullupConfig2: {
            content: '上拉加载更多',
            downContent: '松开进行加载',
            upContent: '上拉加载更多',
            loadingContent: '加载中...'
        },
        pageIndex:1,
        dataForm:'',    
        loading:true,
        noData:false,
        val:''
      }
    },
    components: {
      Scroller
    },
    mounted() {
      this.val = this.$router.currentRoute.query.val;
      this.getActivity()
    },
    methods: {
      load2 () {
         if(!this.loading) return false;
         let { pageIndex, pageCount} = this.dataForm;
         if (pageCount <= this.pageIndex){
             setTimeout(() => {
                this.$refs.demo2.disablePullup()
                this.noData = true
            }, 100)
             return false;
         }
          this.loading = false;
          this.pageIndex++;
          setTimeout(() => {
            this.getActivity()
            this.$refs.demo2.donePullup()
         }, 100)
      },
      getActivity(){
        let  url = CONSTANT.URL.VOTE.FINDVOTELIST,
                param = {
                    voteTitleLike:this.val
                },
                dataForm = {
                    pageIndex:1,
                    pageSize:10
                }
            common.requestAjax(url,param,dataForm,(res)=>{
            if(res.status == 200){
                this.loading = true;
                let data = res.data,
                    pageCount = data.pageCount,
                    bussData = data.bussData
                    if(pageCount == 0||pageCount == 1){
                         this.$refs.demo2.disablePullup()
                    }
                this.dataForm = data;
                this.dataList =  this.pageIndex <= pageCount ? this.dataList.concat(bussData) : this.dataList
            }else{

            }
        })
      },
      linkTo(link,id){
        this.$router.push({ path: link, query: { id: id }})
      },
    }
  };
</script>
<style lang="scss">
   .xs-plugin-pullup-container{
        font-size: 12px;
        bottom: -50px;
    }
      #vux-scroller-g07w2{
          background-color: #f4f4f4;
      }
      .result{
        min-height: 100%;
        background-color: #f2f2f2;
        .result-item{
            padding-top: .3rem;
            .result-list{
                position: relative;
                background-color: #fff;
                font-size: .32rem;
                color: #333;
                width: 6.35rem;
                padding:.31rem .22rem .3rem .32rem;
                margin: 0 auto .2rem;
                height: 1.9rem;
                border-radius: .1rem;
                -webkit-border-radius: .1rem;
                overflow: hidden;
                .pic{
                    float: left;
                    display: block;
                    width: 1.9rem;
                    height: 1.9rem;
                    margin-right: .3rem;
                }
                .btn{
                    position: absolute;
                    right: .23rem;
                    bottom: .29rem;
                    text-align: center;
                    line-height: .48rem;
                    width: 1.3rem;
                    height: .48rem;
                    border-radius: .1rem;
                    -webkit-border-radius: .1rem;
                    font-size: .24rem;
                    color: #fff;
                    background-color: #198AE7;
                }
                .list-info{
                    float: left;
                    width: 4.14rem;
                    .text{
                        font-size: .26rem;
                        color: #666;
                        height: .8rem;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                    }
                    .data{
                        font-size: .22rem;
                        color: #999;
                        margin-top: .21rem;
                        .data-list{
                            margin-right: .36rem;
                            &:nth-child(2){
                                .icon{
                                    width: .26rem;
                                    height: .16rem;
                                    background-image: url(../../images/watchNum.png);
                                }
                            }
                            .icon{
                                background-image: url(../../images/jiaoyi.png);
                                background-size: 100%;
                                width: .2rem;
                                height: .2rem;
                                margin-right: .14rem;
                            }
                        }
                    }
                }
            }
        }
      }
</style>

